<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${survey.title}</title>
    <link rel="stylesheet" href="/static/lib/layui-src/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/question.css" media="all">

    <style>
        .bg {
            background-image: url("/upload/${survey.bgimg}");
            background-size: 100% 100%;
        }

        .surveytitle {
            color: black;
            font-size: 23px;
            text-align: center;
            margin-top: 5px;

        }

        .surveyremark {
            color: #8c8c8c;
            font-size: 16px;
            text-align: center;
            margin-top: 5px;
        }

    </style>
</head>
<body>
<div class="layuimini-container bg"
     style="position: absolute;bottom: 0px;top:0px;left: 0px;right:0px;margin: 0px;">

    <div class="preview" id="preview" style="overflow: auto">
        <ul class="content">
            <div class="surveytitle">
                ${survey.title}
            </div>
            <div class="surveyremark">
                ${survey.remark}
            </div>
            <c:forEach items="${survey.questions}" var="question" varStatus="index">
                <c:if test="${question.type==1 or question.type==2}">

                    <div class="radioTemplate spliter">
                        <li class="using radio">
                            <input type="hidden" name="questionId"  xtype="${question.type}" value="${question.id}">

                            <div class="title">
                                <div class="no_edit"><strong>${(index.index+1)}、${question.title}</strong></div>
                                <c:if test="${question.remark != null && question.remark != ''}">
                                    <div class="no_edit">${question.remark}</div>
                                </c:if>
                            </div>

                            <div class="options">
                                <ul>
                                    <c:forEach items="${question.options}" var="options">
                                        <li>
                                            <table>
                                                <tr>
                                                    <td>
                                                        <c:if test="${options.type == 1}"><input type="radio"
                                                                                                 class="myselect"
                                                                                                 name="r${question.id}"
                                                                                                 value="${options.id}"></c:if>
                                                        <c:if test="${options.type == 2}"><input type="checkbox"
                                                                                                 class="myselect"
                                                                                                 name="r${question.id}"
                                                                                                 value="${options.id}"> </c:if>
                                                    </td>
                                                    <td>
                                                            ${options.opt}
                                                </tr>
                                            </table>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </li>
                    </div>
                </c:if>
                <c:if test="${question.type==3 or question.type==4}">
                    <div class="inputTemplate spliter">
                        <li class="using inputx">
                            <input type="hidden" name="questionId"  xtype="${question.type}" value="${question.id}">

                            <div class="title">
                                <div class="no_edit"><strong>${(index.index+1)}、${question.title}</strong></div>
                                <c:if test="${question.remark != null && question.remark != ''}">
                                    <div class="no_edit">${question.remark}</div>
                                </c:if>
                            </div>
                            <div>
                                <c:if test="${question.type == 3}">
                                    <input type="text" class="inputx" id="r${question.id}">
                                </c:if>
                                <c:if test="${question.type == 4}">
                                    <textarea class="mytext" id="r${question.id}"></textarea>
                                </c:if>
                            </div>
                        </li>
                    </div>
                </c:if>
            </c:forEach>
            <li style="text-align: center;margin: 5px">
                <button class="layui-btn mysave">立即提交</button>
            </li>
        </ul>

    </div>


</div>


<script src="/static/lib/layui-src/layui.js" charset="utf-8"></script>
<script src="/static/js/lay-config.js" charset="utf-8"></script>
<script>
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery, layer = layui.layer;
        $('.mysave').click(function () {

            //获取所有选项id并放入数组中
            var optionArray = $('.myselect');
            optionArray.each(function (index) {
                console.log($(this).prop("name"));//获取选项的name属性
            })

            var list = []; //待提交的集合
            //获取全部问题id并放入数组中
            var questionArr = $('input[name="questionId"]');
            questionArr.each(function (index) {
                var that = $(this); //question的 this --->  that
                var obj = {};
                obj.questionId =$(this).val();
                obj.type=$(this).attr("xtype");
                obj.surveyId="${survey.id}";
                if (obj.type == 1 || obj.type ==2){
                    var tmp = []; //一个问题产生一个选项数组

                    optionArray.each(function (index) {

                        if ($(this).prop("name") == ("r" + that.val())) {  //判断到选项的题号当前题号是否匹配
                            if ($(this).prop("checked")) {
                                tmp.push($(this).val());
                            }
                        }

                    })
                    obj.opts = tmp;

                }else {
                    obj.result = $("#r"+that.val()).val();
                }

                list.push(obj);
            })
            console.log(list);


            $.ajax({
                url:"/survey/submit",
                type:"POST",
                contentType:'application/json',
                dataType:'json',
                data:JSON.stringify(list),
                success:function (src) {
                    layer.msg(src.msg,{time:500},function () {
                        window.location.href="/survey/success";
                    })
                }
            })


        });

    });


</script>
</body>
</html>